<!-- Cong that you notice this line, 
          the source code in the index.phps -->
          <!DOCTYPE html>
          <html>
          <head>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
            <title> Giraffe's Coffee</title>
            <link rel="stylesheet" href="bootstrap.min.css">
            <style>
              body{background: #eee url(sativa.png);}
              html,body{
                  position: relative;
                  height: 100%;
              }
              #output{
                  position: absolute;
                  width: 300px;
                  top: -75px;
                  left: 0;
                  color: #fff;
              }
              .login-container{
                  position: relative;
                  width: 300px;
                  margin: 80px auto;
                  padding: 20px 40px 40px;
                  text-align: center;
                  background: #fff;
                  border: 1px solid #ccc;
              }
              .login-container::before,.login-container::after{
                  content: "";
                  position: absolute;
                  width: 100%;height: 100%;
                  top: 3.5px;left: 0;
                  background: #fff;
                  z-index: -1;
                  -webkit-transform: rotateZ(4deg);
                  -moz-transform: rotateZ(4deg);
                  -ms-transform: rotateZ(4deg);
                  border: 1px solid #ccc;
              }
              .login-container::after{
                  top: 5px;
                  z-index: -2;
                  -webkit-transform: rotateZ(-2deg);
                   -moz-transform: rotateZ(-2deg);
                    -ms-transform: rotateZ(-2deg);
              }
              .avatar{
                  width: 150px;height: 150px;
                  margin: 10px auto 30px;
                  border-radius: 100%;
                  border: 2px solid #aaa;
                  background-size: cover;
                  background-image: url(http://40.media.tumblr.com/07510cd53d4e0934dcaaecffa9d39ca6/tumblr_nkrj74wm4w1qipdnro1_500.jpg);
                  background-position: 36%;
                  
              }
              .form-box input{
                  width: 100%;
                  padding: 10px;
                  text-align: center;
                  height:40px;
                  border: 1px solid #ccc;;
                  background: #fafafa;
                  transition:0.2s ease-in-out;
              }
              .form-box input:focus{
                  outline: 0;
                  background: #eee;
              }
              .form-box input[type="text"]{
                  border-radius: 5px 5px 0 0;
                  text-transform: lowercase;
              }
              .form-box input[type="password"]{
                  border-radius: 0 0 5px 5px;
                  border-top: 0;
              }
              .form-box button.login{
                  margin-top:15px;
                  padding: 10px 20px;
              }
            </style>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
          
            <script TYPE="text/javascript">
              function register(username, password){
                    $.post( '/', 
                            {'username': username, 'password': password, 'mode': 'register'},
                            function(data){
                              $("#output").removeClass(' alert alert-success');
                              $("#output").addClass("alert alert-danger animated fadeInUp")
                              $("#output").html(data);
                              window.setTimeout(function(){
                                window.location.href = '/';
                              }, 1500);
                            } );    	
              }
                function send(username, password){
                    $.post( '/', 
                            {'username': username, 'password': password, 'mode': 'login'},
                            function(data){
                              $("#output").removeClass(' alert alert-success');
                              $("#output").addClass("alert alert-danger animated fadeInUp")
                              $("#output").html(data);
                              window.setTimeout(function(){
                                window.location.href = '/';
                              }, 1500);
                            } );
                }
            </script>
          </head>
          <body>
          
          <div class="container">
            <div class="login-container">
              <div id='output'>
              </div>
              <div class="avatar"></div>
              <div class="form-box">
                <form method='POST' onsubmit='send(this.username.value, this.password.value);return false;'>
                  <input name="username" type="text" placeholder="username" autofocus="autofocus" >
                  <input type="password" name="password" placeholder="password">
                  <button class="btn btn-info btn-block login" type="submit"> Login </button>
                  <button class="btn btn-info btn-block login" type="button" onclick='register(this.form.username.value, this.form.password.value);'> Register </button>
                </form>
              </div>
            </div>        
          </div>
          
          </body>
          </html>
          